{% extends "website/base.html" %}
{% load static %}
{% block content %}
<script src="{% static 'website/js/telehealthscare_v36_carousel.js' %}" defer></script>
<section class="ths-v36-showcase" aria-label="Featured healthcare services">
  <div class="ths-v36-image-banner">
    <img src="{% static 'website/img/services/home_nursing_photo.jpg' %}" alt="Healthcare team providing professional care">
    <div class="ths-v36-image-overlay">
      <span>COMPREHENSIVE HEALTHCARE SERVICES</span>
      <strong>Your health and wellbeing, anytime, anywhere.</strong>
      <a href="{% url 'website:services' %}">Explore services ↗</a>
    </div>
    <div class="ths-v36-shortcuts"><a href="{% url 'website:care_request_step1' %}">🏠 Home Nursing</a><a href="{% url 'website:telehealth_booking' %}">🩺 Medical Care</a><a href="{% url 'website:services' %}">✚ Specialist Care</a><a href="{% url 'website:telehealth_booking' %}">Book Now</a></div>
  </div>
  <div class="ths-v36-featured" data-v36-carousel>
    <div class="ths-v36-slide is-active"><span class="ths-v36-eyebrow">✦ FEATURED SERVICE</span><h1>Neonatal Intensive Care Unit (NICU)</h1><p>Explore coordinated specialist healthcare services and referral pathways.</p><div class="ths-v36-ctas"><a href="{% url 'website:services' %}">Explore Services</a></div></div>
    <div class="ths-v36-slide" hidden><span class="ths-v36-eyebrow">✦ FEATURED SERVICE</span><h2>Academic and Training Unit</h2><p>Discover healthcare education and professional support services.</p><div class="ths-v36-ctas"><a href="{% url 'website:services' %}">Explore service</a></div></div>
    <div class="ths-v36-slide" hidden><span class="ths-v36-eyebrow">✦ FEATURED SERVICE</span><h2>Telehealth Consultations</h2><p>Book convenient consultations with healthcare professionals.</p><div class="ths-v36-ctas"><a href="{% url 'website:telehealth_booking' %}">Book consultation</a></div></div>
    <div class="ths-v36-slide" hidden><span class="ths-v36-eyebrow">✦ FEATURED SERVICE</span><h2>Home Nursing and Recovery</h2><p>Arrange care and support in the comfort of your home.</p><div class="ths-v36-ctas"><a href="{% url 'website:care_request_step1' %}">Request care</a></div></div>
    <div class="ths-v36-controls"><div class="ths-v36-dots"><button class="is-active" type="button" data-v36-dot="0" aria-label="Slide 1"></button><button type="button" data-v36-dot="1" aria-label="Slide 2"></button><button type="button" data-v36-dot="2" aria-label="Slide 3"></button><button type="button" data-v36-dot="3" aria-label="Slide 4"></button></div><div><button type="button" data-v36-prev aria-label="Previous featured service">‹</button><button type="button" data-v36-next aria-label="Next featured service">›</button></div></div>
  </div>
  <div class="ths-v36-team"><span>QUALIFIED CARE TEAM</span><h2>Consultants, doctors, nurses, and specialist support teams</h2><p>Connect with our team for telehealth, home care, and specialist support.</p><div class="ths-v36-chips"><span>Telehealth</span><span>Home Care</span><span>Paediatric</span><span>Recovery</span></div></div>
</section>
<section class="ths-quick-access" aria-label="Healthcare access options">
  <div class="ths-section-intro"><span>HEALTHCARE, CONNECTED</span><h2>How can we help you today?</h2><p>Choose the right starting point for your care. Our team can help coordinate the next steps.</p></div>
  <details class="ths-v40-accordion ths-v40-quick" data-v40-accordion open><summary><span>Choose a care service</span><span class="ths-v40-chevron" aria-hidden="true">⌄</span></summary><div class="ths-v40-accordion-body"><div class="ths-action-grid">
    <a class="ths-action" href="{% url 'website:telehealth_booking' %}"><span class="ths-action-icon" aria-hidden="true">🩺</span><strong>See a clinician</strong><small>Request a virtual consultation</small><span class="ths-action-link">Book consultation →</span></a>
    <a class="ths-action" href="{% url 'website:care_request_step1' %}"><span class="ths-action-icon" aria-hidden="true">🏠</span><strong>Care at home</strong><small>Arrange nursing and recovery support</small><span class="ths-action-link">Request care →</span></a>
    <a class="ths-action" href="{% url 'website:services' %}"><span class="ths-action-icon" aria-hidden="true">🏥</span><strong>Explore healthcare</strong><small>Discover available services</small><span class="ths-action-link">View services →</span></a>
    <a class="ths-action" href="{% url 'website:support_ticket_create' %}"><span class="ths-action-icon" aria-hidden="true">💬</span><strong>Need assistance?</strong><small>Contact the coordination team</small><span class="ths-action-link">Get support →</span></a>
  </div>
  </div></details>
  <p class="ths-safety-note"><strong>Medical emergency?</strong> This platform is not an emergency response service. Contact local emergency services immediately.</p>
</section>

<section class="ths-v33-hub ths-v40-accordion-section" aria-label="Healthcare service catalogue"><details class="ths-v40-accordion" data-v40-accordion open><summary><span>Explore more healthcare services</span><span class="ths-v40-chevron" aria-hidden="true">⌄</span></summary><div class="ths-v40-accordion-body">
  <div class="ths-v33-heading"><div><span class="ths-v33-kicker">EXPLORE CARE</span><h2>Healthcare services, on your terms</h2><p>Find the right care pathway and book directly through Telehealthscare Services.</p></div><a href="{% url 'website:services' %}">View all services →</a></div>
  <div class="ths-v33-scroller" tabindex="0" aria-label="Scrollable healthcare services">
    <a href="{% url 'website:telehealth_booking' %}" class="ths-v33-tile"><span aria-hidden="true">🩺</span><strong>Telehealth</strong><small>Virtual consultation</small></a>
    <a href="{% url 'website:care_request_step1' %}" class="ths-v33-tile"><span aria-hidden="true">🏠</span><strong>Home nursing</strong><small>Care at your doorstep</small></a>
    <a href="{% url 'website:services' %}" class="ths-v33-tile"><span aria-hidden="true">🧑‍⚕️</span><strong>Specialist care</strong><small>Explore available services</small></a>
    <a href="{% url 'website:services' %}" class="ths-v33-tile"><span aria-hidden="true">💪</span><strong>Rehabilitation</strong><small>Recovery and support</small></a>
    <a href="{% url 'website:support_ticket_create' %}" class="ths-v33-tile"><span aria-hidden="true">💬</span><strong>Care support</strong><small>Ask our coordination team</small></a>
  </div>
  <div class="ths-v33-highlights"><details><summary>Healthcare highlights <span>+</span></summary><p>Explore consultation and care pathways suited to your needs.</p><a href="{% url 'website:services' %}">Browse services</a></details><details><summary>Quick links <span>+</span></summary><div class="ths-v33-links"><a href="{% url 'website:telehealth_booking' %}">Book consultation</a><a href="{% url 'website:care_request_step1' %}">Request home care</a><a href="{% url 'website:support_ticket_create' %}">Contact support</a></div></details></div>
</div></details></section>





<section class="section ths-v40-accordion-section"><details class="ths-v40-accordion" data-v40-accordion open><summary><span>Key Services</span><span class="ths-v40-chevron" aria-hidden="true">⌄</span></summary><div class="ths-v40-accordion-body">
  <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap">
    <div>
      <h2 class="h2">Key Services</h2>
      <p class="p">Clear, supportive services designed around client safety and comfort.</p>
    </div>
    <a class="btn" href="{% url 'website:services' %}">View all services</a>
  </div>

  
  <div class="grid grid-3 native-swipe ths-v39-services" native-swipe style="margin-top:12px">
    <div class="card soft hover native-card ripple" data-theme="blue">
      <div class="card-title">
        <div class="icon">🎥</div>
        <div>
          <h3 class="h3">Video Consultations</h3>
          <div class="small">Talk to licensed doctors online</div>
        </div>
      </div>
      <p class="p">Secure video consultations, treatment advice, and follow-ups.</p>
      <a class="btn btn-primary btn-sm" href="{% url 'website:telehealth_booking' %}">Book video consult</a>
    </div>

    <div class="card soft hover native-card ripple" data-theme="purple">
      <div class="card-title">
        <div class="icon">🧠</div>
        <div>
          <h3 class="h3">Mental health and psychosocial support</h3>
          <div class="small">Confidential care and counseling</div>
        </div>
      </div>
      <p class="p">Psychosocial support and mental health consultations by professionals.</p>
      <a class="btn btn-primary btn-sm" href="{% url 'website:telehealth_booking' %}">Book mental health</a>
    </div>

    <div class="card soft hover native-card ripple" data-theme="green">
      <div class="card-title">
        <div class="icon">🩹</div>
        <div>
          <h3 class="h3">Nursing Follow-ups</h3>
          <div class="small">Virtual/physical assessments</div>
        </div>
      </div>
      <p class="p">Nursing assessments, recovery follow-ups, and care coordination.</p>
      <a class="btn btn-primary btn-sm" href="{% url 'website:telehealth_booking' %}">Book follow-up</a>
    </div>
  </div>

  <div class="sep" style="margin:16px 0"></div>


</div></details></section>

<section class="section ths-v40-accordion-section"><details class="ths-v40-accordion" data-v40-accordion open><summary><span>Why Choose Us</span><span class="ths-v40-chevron" aria-hidden="true">⌄</span></summary><div class="ths-v40-accordion-body">
  <div class="card">
    <h2 class="h2">Why Choose Us</h2>
    <div class="grid grid-2 native-swipe ths-v39-benefits" native-swipe style="margin-top:12px">
      <div class="card soft card-tight native-card ripple" data-theme="green">
        <div class="card-title">
          <div class="icon">✅</div>
          <h3 class="h3">Vetted caregivers</h3>
        </div>
        <p class="p">Care delivered by qualified, ethical, and well-supervised staff.</p>
      </div>
      <div class="card soft card-tight native-card ripple" data-theme="blue">
        <div class="card-title">
          <div class="icon">🧩</div>
          <h3 class="h3">Client-centered plans</h3>
        </div>
        <p class="p">Tailored support aligned with comfort, culture, and preferences.</p>
      </div>
      <div class="card soft card-tight native-card ripple" data-theme="purple">
        <div class="card-title">
          <div class="icon">🔒</div>
          <h3 class="h3">Confidential &amp; safe</h3>
        </div>
        <p class="p">Privacy-first communication and safety-focused care delivery.</p>
      </div>
      <div class="card soft card-tight native-card ripple" data-theme="teal">
        <div class="card-title">
          <div class="icon">📍</div>
          <h3 class="h3">Reliable coordination</h3>
        </div>
        <p class="p">Clear updates, monitoring, and responsive support for families.</p>
      </div>
    </div>
  </div>
</div></details></section>

<section class="section ths-v40-accordion-section"><details class="ths-v40-accordion" data-v40-accordion open><summary><span>Testimonials</span><span class="ths-v40-chevron" aria-hidden="true">⌄</span></summary><div class="ths-v40-accordion-body">
  <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap">
    <div>
      <h2 class="h2">Testimonials</h2>
      <p class="p">Feedback focused on care quality and compassion.</p>
    </div>
    <a class="btn" href="{% url 'website:testimonials' %}">All testimonials</a>
  </div>

  
  {% if testimonials %}
  <div class="grid grid-3 native-swipe" style="margin-top:12px">
    {% for t in testimonials %}
      <article class="card hover native-card testimonial-card">
        <div class="card-title"><div class="icon">💬</div><div><h3 class="h3">{{ t.name|default:"Anonymous" }}</h3><div class="small">{{ t.relation }}</div></div></div>
        <p class="p">“{{ t.content }}”</p>
      </article>
    {% endfor %}
  </div>
  {% else %}
  <p class="p">We value every client’s experience and are committed to compassionate, respectful care.</p>
  {% endif %}
</div></details></section>

{% endblock %}

<script>(function(){const root=document.querySelector('[data-care-carousel]');if(!root)return;const slides=[...root.querySelectorAll('.care-slide')],dots=[...root.querySelectorAll('[data-care-dot]')];let active=0;function show(i){active=(i+slides.length)%slides.length;slides.forEach((s,n)=>{s.classList.toggle('is-active',n===active);s.setAttribute('aria-hidden',n===active?'false':'true');});dots.forEach((d,n)=>{d.classList.toggle('is-active',n===active);if(n===active)d.setAttribute('aria-current','true');else d.removeAttribute('aria-current');});}root.querySelector('[data-care-prev]').addEventListener('click',()=>show(active-1));root.querySelector('[data-care-next]').addEventListener('click',()=>show(active+1));dots.forEach((d,i)=>d.addEventListener('click',()=>show(i)));if(!window.matchMedia('(prefers-reduced-motion: reduce)').matches){let t=setInterval(()=>{if(!document.hidden)show(active+1)},6500);root.addEventListener('mouseenter',()=>clearInterval(t));root.addEventListener('mouseleave',()=>{clearInterval(t);t=setInterval(()=>{if(!document.hidden)show(active+1)},6500)});}})();</script>